<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>审计系统 - 项目列表</title>
		<link
			rel="stylesheet"
			href="{{ url_for('static', filename='css/style.css') }}"
		/>

		<style>
			/* 说明区域的样式 */
			.instructions {
				background-color: #f8f9fa;
				border: 1px solid #dee2e6;
				border-radius: 4px;
				padding: 15px;
				margin-bottom: 20px;
				font-size: 14px;
				line-height: 1.5;
				display: none; /* 默认隐藏 */
				transition: all 0.3s ease; /* 添加过渡效果 */
			}

			/* 按钮样式 */
			.toggle-btn {
				background-color: #4a90e2;
				color: white;
				border: none;
				border-radius: 4px;
				padding: 8px 15px;
				cursor: pointer;
				font-size: 14px;
				margin-bottom: 10px;
			}

			.toggle-btn:hover {
				background-color: #357abd;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1 class="container-title">
				建设项目内部审计——南舟AI流程合规性审计软件
			</h1>

			<!-- 使用说明区域 -->
			<button class="toggle-btn" onclick="toggleInstructions()">
				展开使用说明
			</button>
			<div class="instructions" id="instructions">
				<h2>使用说明</h2>
				<p>
					1.
					<strong>创建新项目</strong
					>：点击"创建新项目"按钮，填写项目信息后提交。
				</p>
				<p>
					2.
					<strong>上传规范性文件</strong
					>：即审计的依据，如《建设工程质量管理条例》、《质量验收标准》、《建设工程项目管理规范》、《企业内部控制手册》等。
				</p>
				<p>
					3.
					<strong>上传项目资料底稿</strong
					>：即审计的证据，如《施工合同》、《内部审批流程》、《进度管理记录》、《会议记录》、《审计发现的问题》等在审计过程中与项目相关资料。
				</p>
				<p>
					4.
					<strong>生成内部控制测试报告</strong
					>：AI会根据已上传审计依据，自动审查现有的审计证据，按现有已上传的证据自动生成《内部控制测试报告》。
				</p>
				<p>
					5.
					<strong>删除项目</strong
					>：在项目列表中选择项目，点击"删除项目"按钮，确认后将删除该项目及其相关资料。
				</p>
				<p>
					6.
					<strong>适用文件格式</strong
					>：目前项目能使用doc、docx、xls、xlsx生成报告和逻辑图，txt格式仅能生成报告。
				</p>
			</div>
			<div class="card">
				<h2 class="project-title">项目列表</h2>
				<div class="button-group">
					<a href="{{ url_for('create_project_form') }}" class="btn"
						>创建新项目</a
					>
				</div>
				<table class="table">
					<thead>
						<tr>
							<th>ID</th>
							<th>名称</th>
							<th>状态</th>
							<th>开始日期</th>
							<th>结束日期</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						{% for project in projects %}
						<tr>
							<td>{{ project.id }}</td>
							<td>{{ project.name }}</td>
							<td>{{ project.status }}</td>
							<td>{{ project.start_date }}</td>
							<td>{{ project.end_date }}</td>
							<td>
								<a
									href="{{ url_for('upload_normative_document_form', project_id=project.id) }}"
									class="btn btn-sm btn-upload"
									>上传规范性文件</a
								>
								<a
									href="{{ url_for('project_documents', project_id=project.id) }}"
									class="btn btn-sm"
									>上传项目资料底稿</a
								>
								<a
									href="{{ url_for('project_internal_controls', project_id=project.id) }}"
									class="btn btn-sm btn-control"
									>生成内部控制测试报告</a
								>
								<!-- 添加删除按钮 -->
								<a
									href="{{ url_for('delete_project', project_id=project.id) }}"
									class="btn btn-sm btn-danger"
									onclick="return confirm('确定要删除这个项目吗？')"
									>删除项目</a
								>
							</td>
						</tr>
						{% endfor %}
					</tbody>
				</table>
			</div>
		</div>

		<script>
			// 控制说明区域的显示和隐藏
			function toggleInstructions() {
				const instructions = document.getElementById('instructions');
				const toggleBtn = document.querySelector('.toggle-btn');

				if (
					instructions.style.display === 'none' ||
					instructions.style.display === ''
				) {
					instructions.style.display = 'block';
					toggleBtn.textContent = '隐藏使用说明';
				} else {
					instructions.style.display = 'none';
					toggleBtn.textContent = '展开使用说明';
				}
			}
		</script>
	</body>
</html>
